<template>
  <el-row :gutter="40" style="margin:0px;">
    <el-col :lg="20">
      <el-form :inline="true" :model="queryParams" class="filter-form-inline" label-position="right" size="small">
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :span="6">
            <el-form-item label="状态" style="width: 100%">
              <el-select v-model="queryParams.monthlyCheckStatus" placeholder="状态" style="width: 100%"
                         @change="handlChange">
                <el-option label="全部状态" value=""/>
                <el-option label="已撤销" value="-2"/>
                <el-option label="审核未通过" value="-1"/>
                <el-option label="待审批" value="0"/>
                <el-option label="有效" value="1"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="盘点时间" style="width: 100%">
              <date-range-picker v-model:date="date" end-placeholder="结束日期" range-separator="至" start-placeholder="开始日期"
                                 style="width: 100%" @change="handlDate"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" style="width: 100%">
              <el-input v-model="queryParams.keyWord" clearable placeholder="关键字"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="width: 100%">
              <el-button class="border-btn" @click="handlReset">重置</el-button>
              <el-button class="main-btn" type="primary" @click="handlSearch">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
  </el-row>

  <table-view :cell-style="cellStyle" :data="tableData" border header-cell-class-name="table-header"
              @row-click="aloneClick" @sort-change="handlSort">
    <el-table-column align="center" label="盘点编号" type="index" width="80"/>

    <el-table-column :min-width="200" :show-overflow-tooltip="true" header-align="center" label="配送商名称"
                     prop="distribute.distributeName"/>

    <el-table-column :show-overflow-tooltip="true" align="center" label="盘点时间" prop="checkTime">
      <template #default="{row}">
        {{ dateFormat("yyyy-mm-dd", row.checkTime) }}
      </template>
    </el-table-column>

    <el-table-column :show-overflow-tooltip="true" align="center" label="创建人" prop="creatorName"/>

    <el-table-column :show-overflow-tooltip="true" align="center" label="创建时间">
      <template #default="{row}">
        {{ dateFormat("yyyy-mm-dd HH:MM:SS", row.createdAt) }}
      </template>
    </el-table-column>

    <el-table-column :show-overflow-tooltip="true" align="center" label="状态">
      <template #default="{row}">
        <!-- 月度盘点状态（-2已撤销）（-1审核不通过）（0待审批） 1（有效） -->
        <div style="line-height:20px">
          <span v-if="row.monthlyCheckStatus === '-2'">已撤销</span>
          <span v-if="row.monthlyCheckStatus === '-1'">审核未通过</span>
          <span v-if="row.monthlyCheckStatus === '0'">审核中</span>
          <span v-if="row.monthlyCheckStatus === '1'">有效</span>
        </div>
        <div v-if="row.flowStatus ==='REJECT' || row.flowStatus ==='REJECT_INITIATOR'" class="flow-status-color"
             style="line-height:20px">
          [回退]
        </div>

      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template #default="{row}">
        <el-button v-auth="{v:['crm:returnedRecords:inventory:edite'],
          bool:row.monthlyCheckStatus === '-1' || row.monthlyCheckStatus === '-2' || 
          row.flowStatus ==='REJECT' || row.flowStatus ==='REJECT_INITIATOR'}" size="mini" type="text"
                   @click="handlEditer(row)">编辑
        </el-button>
        <el-button v-auth="{v:['crm:returnedRecords:inventory:delete'],
          bool:row.monthlyCheckStatus === '-1' || row.monthlyCheckStatus === '-2' || 
          row.flowStatus ==='REJECT' || row.flowStatus ==='REJECT_INITIATOR'}" size="mini" type="text"
                   @click="handlDele(row.id)">删除
        </el-button>
      </template>

    </el-table-column>

  </table-view>
  <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.page"
              :total="total" style="display: flex; justify-content: flex-end" @pagination="handlList"/>

  <ruleForm ref="ruleFormRef" @succsess="succsess"/>
</template>

<script>
import {defineAsyncComponent, getCurrentInstance, inject, onMounted, reactive, toRefs,} from "vue";
import {useRouter} from "vue-router";

export default {
  name: "Inventory",
  components: {
    ruleForm: defineAsyncComponent(() => import("./ruleForm.vue")),
  },
  setup() {
    const api = inject("api");
    const router = useRouter();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      queryParams: {
        pageSize: 20,
        page: 1,
        keyWord: "",
        startTime: null,
        endTime: null,
        monthlyCheckStatus: "",
      },
      date: "",
      total: 0,
      ruleFormRef: null,
      tableData: [],
    });

    const handlDate = (val) => {
      data.queryParams.startTime = val[0];
      data.queryParams.endTime = val[1];
    };

    const handlList = () => {
      api.inventory.INVENTORY_LIST(data.queryParams).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || [];
          data.total = res.data.total;
        }
      });
    };

    const handlReset = () => {
      data.queryParams = {
        pageSize: 20,
        page: 1,
        keyWords: "",
        startTime: null,
        endTime: null,
      };
      data.date = null;
      handlList();
    };

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === "操作") return;
      router.push({
        name: "inventoryReturnedRecords",
        query: {id: row.id},
      });
    };

    const cellStyle = () => {
      return "cursor:pointer;";
    };

    const handlSearch = () => {
      data.queryParams.page = 1;
      handlList();
    };

    const handlDele = (id) => {
      currentInstance.proxy
          .alertBox({
            message: "删除数据后不可恢复,确定删除？",
          })
          .then(() => {
            api.inventory.INVENTORY_DETELETE(id).then((res) => {
              if (res.code === 0) {
                handlList();
              } else {
                currentInstance.proxy.customMessage({
                  type: "error",
                  message: res.msg,
                });
              }
            });
          })
          .catch((err) => {
            console.log(err);
          });
    };

    const handlNew = () => {
      data.ruleFormRef.open(null);
    };

    const handlEditer = (val) => {
      data.ruleFormRef.open(val);
    };

    const succsess = () => {
      handlList();
    };

    onMounted(() => {
      handlList();
    });

    return {
      ...toRefs(data),
      handlDate,
      handlList,
      aloneClick,
      cellStyle,
      handlReset,
      handlSearch,
      handlDele,
      handlNew,
      succsess,
      handlEditer,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
